<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <meta name="author" content="zhangjiarui">
  <meta name="keywords" content="kindness>
  <meta name="description" content="this web is a place to show your kindness">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
  <title>好人之家——张嘉睿</title>
 <body class="body">
  <table class="toptable" background="img/background2.jpg">
		<tr>
		    <td align="center"class="topword"><h3>伟大&nbsp;只有&nbsp;<h3><h1>风流&nbsp;<h1><h3>尤其&nbsp;<h3><h2>技术部&nbsp;<h2><h3>最牛&nbsp;<h3></td>
		</tr>
  </table>
 </body>
<style>
.whole{
    text-align:center;
    height:600px;
}
.maintable{
	font-style:italic;
	font-weight:bold;
	position:absolute;
	left:550px;
	top:300px;
	background-size=100%;
    width:500px;
	height:400px;
	padding-top:70px;
}
input[type="submit"]{
     width:275px;
	 height:35px;
}	
.text{
        width:275px;
	    height:35px;
		margin-bottom:40px;
} 
.topword {
    font-style:italic;
	font-weight:bold;
	font-size:20px;
	color:red;
}
.toptable{
	height: 300px;
	width: 1000px;
	margin-left: 300px;
	background-size=100%;
	opacity: 0.5;
}
.body{
	background:url(img/background.jpg) no-repeat;
	background-size:100%;
}
</style>
</head>
<body>
<div class="whole">
     <div class="maintable"
   
        <form>
          用户名:<input id="username" type="text" class="text" placeholder="请输入用户名">
		  <br>
          
		  密码:<input id="password" type="password" class="text" placeholder="请输入密码">
		  
		  <p id="find_result">
			<br>
		  </p> 
		  
		  验证码:<input id="randomword" type="text" class="text" placeholder="请输入验证码">
          
		  <input type="submit" class="text" value="马上登录" onclick="gotoLogin()"> 
		  
		  <input type="submit" class="text" value="返回注册" onclick="gotoRegister()">	
        </form> 	   
     </div>
	 
</div>
<div class="denglu">

</div>
</body>

<script>
	var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
	var arr = str.split("");
	var result = "";
	for(var i=0;i<8;i++)
	{
		var n = Math.floor(Math.random() * arr.length);
		result += arr[n];
	}
	var find_result = document.getElementById("find_result");  
    find_result.innerHTML = result;
	
	function gotoRegister() 
	{
		window.open("zhuce.html");
	}
	
	function gotoLogin() 
	{
		var usernameId = document.getElementById("username");
		var username = usernameId.value;
		if (username.length == 0) {
            alert("请输入用户名");
            return; 
		}

		var passwordId = document.getElementById("password");
		var password = passwordId.value;
		if (password.length == 0) {
			alert("请输入密码");
			return;
		}
        
        var storage = window.localStorage;
		var storagePassword = storage["password"];
		if (password != storagePassword) 
		{
            alert("密码错误");
            return;
		}
		
		var randomwordId = document.getElementById("randomword");
		var randomword=randomwordId.value;
		if (result != randomword) 
		{
            alert("验证码错误");
            return;
		}
		
		alert("成功了");
		storage["token"] = password;
		window.open("success.html");
		var date = new Date();
        var currentTime = date.toLocaleString();
        storage["loginTime"] = currentTime;
	}
</script>

</html>
